<template>
  <view class="result-container">
    <!-- 前20题得分 -->
    <view class="card">
      <text class="card-title">短期焦虑得分：</text>
      <text class="score">{{ result.front20Score }}</text>
    </view>

    <!-- 短期焦虑评分 -->
    <view class="card" :class="shortTermAnxietyClass">
      <text class="card-title">短期焦虑：</text>
      <text class="score">{{ result.shortTermAnxiety }}</text>
    </view>

    <!-- 后20题得分 -->
    <view class="card">
      <text class="card-title">长期焦虑得分：</text>
      <text class="score">{{ result.back20Score }}</text>
    </view>

    <!-- 长期焦虑评分 -->
    <view class="card" :class="longTermAnxietyClass">
      <text class="card-title">长期焦虑：</text>
      <text class="score">{{ result.longTermAnxiety }}</text>
    </view>
	
	<!-- ai分析结果 -->
	<view class="card">
		  <text class="card-title">ai分析结果</text>
		  <text class="ai-estimation">{{result.ai_estimation}}</text>
	</view>
	
    <!-- 测试时间 -->
    <view class="card">
      <text class="card-title">测试时间：</text>
      <text class="score">{{ formattedDate }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ["result"],
  computed: {
	longTermAnxietyClass() {
	  switch (this.result.longTermAnxiety) {
	    case "有长期焦虑": return "has-longTermAnxiety";
	    case "无长期焦虑": return "no-longTermAnxiety";
	    default: return "";
	  }
	},
	shortTermAnxietyClass() {
	  switch (this.result.shortTermAnxiety) {
	    case "有短期焦虑": return "has-shortTermAnxiety";
	    case "无短期焦虑": return "no-shortTermAnxiety";
	    default: return "";
	  }
	},
    // 格式化 created_at 日期（如果需要）
    formattedDate() {
      if (!this.result.created_at) return "无数据";
      const date = new Date(this.result.created_at);
      return date.toLocaleString(); // 转换为本地时间格式
    }
  }
};
</script>

<style scoped>
/* 结果容器 */
.result-container {
  background: #ffffff;
  padding: 20px;
}

/* 卡片样式 */
.card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  border-left: 6px solid #3498db;
  transition: all 0.3s ease;
}

/* 文字样式 */
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.score {
  font-size: 14px;
  color: #555;
  margin-top: 5px;
  font-weight: bold;
}
/* 有短期焦虑 */
.has-shortTermAnxiety {
  border-left: 6px solid #e74c3c;
  background: #fdecea;
}

/* 无短期焦虑 */
.no-shortTermAnxiety {
  border-left: 6px solid #2ecc71;
  background: #e9f7ef;
}

/* 有长期焦虑 */
.has-longTermAnxiety {
  border-left: 6px solid #e74c3c;
  background: #fdecea;
}

/* 无长期焦虑 */
.no-longTermAnxiety {
  border-left: 6px solid #2ecc71;
  background: #e9f7ef;
}
</style>
